.security-rating {
	padding: 16px 2rem 0;
	position: relative;
	.desc-wapper {
		position: relative;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		padding-top: 2rem;
		z-index: 1;
		.title {
			font-size: 18px;
			position: absolute;
			top: 20px;
			left: 50%;
			transform: translateX(-50%);
		}
		.Circle {
			width: 4.75rem;
		}
		.score {
			position: absolute;
			z-index: 10;
			margin-top: 4rem;
			color: var(--color-text-0);
			font-size: calc(var(--text-xl) - 2px);
		}
		.text {
			position: absolute;
			bottom: 44px;
			width: 50px;
			height: 22px;
			text-align: center;
			border-radius: 20px;
		}
		.needle {
			position: absolute;
			z-index: 1;
			width: 40px;
			height: 60px;
			margin-top: -31px;
			transform: rotate(-120deg);
			transform-origin: 20px 52px;
		}
	}
}
.text2 {
	width: 50px;
	height: 22px;
	text-align: center;
	border-radius: 20px;
	position: absolute;
	bottom: 14px;
}
.circle {
	position: absolute;
	top: 58px;
	z-index: 0;
	display: flex;
	align-items: end;
	justify-content: center;
	width: 10.5rem;
	height: 10.5rem;
	background: #fff0;
	border-radius: 50%;
	box-shadow: 0px 2px 2px #4b4a4a69;
}

.table {
	padding: 24px 40px;
	.smalltit {
		margin-bottom: 1.25rem;
		color: var(--color-text-0);
		font-size: var(--text-base-size);
	}
	.info {
		margin-top: 0.5rem;
		color: var(--color-text-2);
		font-size: var(--text-sm);
	}
	.close-btn {
		display: flex;
		justify-content: center;
		padding-top: 1.75rem;
	}
	.rank-rule {
		width: 100%;
		font-size: var(--text-sm);
		box-shadow: 0 0 0 1px var(--color-border-2);

		th {
			font-weight: normal;
			background: var(--color-bg-2);
		}

		th,
		td {
			padding: 0.5rem 1rem;

			& + td,
			& + th {
				border-left: 1px solid var(--color-border-2);
			}
		}

		td {
			border-top: 1px solid var(--color-border-2);
		}

		.suggest {
			max-width: 20em;
		}
	}
	.loseDetail {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
		color: var(--color-text-0);
		font-size: var(--text-base-size);
	}
	.head {
		display: flex;
		align-items: center;
		height: 2.25rem;
		font-size: 14px;
		background-color: var(--color-bg-2);
		border: 1px solid var(--color-border-2);
		border-radius: 2px 2px 0 0;
		span {
			height: 2.25rem;
			padding-left: 1.5rem;
			line-height: 2.25rem;
		}
	}
	.body {
		background-color: var(--color-bg-0);
		border-top: none;
		border-radius: 0;
	}
	.head span:first-child {
		width: 10rem;
		border-right: 1px solid var(--color-border-2);
	}
	.head span:nth-child(n + 2) {
		width: 10rem;
	}
	.head span:last-child {
		width: 22.5rem;
		border-left: 1px solid var(--color-border-2);
	}
	a:hover {
		text-decoration: none;
	}
	.detail {
		display: flex;
		height: 2.25rem;
		font-size: var(--text-sm);
		background-color: var(--color-bg-2);
		border: 1px solid var(--color-border-2);
		border-radius: 2px 2px 0 0;
		span {
			height: 2.25rem;
			padding-left: 1.5rem;
			line-height: 2.25rem;
		}
	}
	.weakness {
		height: 7.75rem;
		background-color: var(--color-bg-0);
		border-top: 0;
		border-radius: 0;
		span {
			height: 7.75rem;
			line-height: 5.75rem;
		}
	}
	.suggest {
		padding-top: 0.5rem;
		line-height: 1.25rem !important;
	}
	.securi {
		padding-top: 1.25rem;
		line-height: 1.25rem !important;
	}
	.types {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-left: 1.5rem;
	}
	.detail span:first-child {
		width: 6.75rem;
		border-right: 1px solid var(--color-border-2);
	}
	.detail span:nth-child(n + 2) {
		width: 6.75rem;
		border-right: 1px solid var(--color-border-2);
	}
	.detail span:nth-child(n + 3) {
		width: 20rem;
		border-right: 1px solid var(--color-border-2);
	}
	.weakness div {
		width: 20rem;
		border-right: 1px solid var(--color-border-2);
	}
	.detail span:last-child {
		width: 12.5rem;
	}
}
.fs12 {
	font-size: 12px;
	&>div{
		margin-bottom: 6px;
	}
}
.rule {
	position: absolute;
	top: 14px;
	left: 17px;
	color: var(--color-primary);
	font-size: var(--text-sm);
	cursor: pointer;
	z-index: 2;
}
.w780 {
	width: 780px !important;
}
